<template>
  <section id="meetups">
    <MeetupItem
      v-for="meetup in meetups"
      :key="meetup.id"
      :id="meetup.id"
      :title="meetup.title"
      :subtitle="meetup.subtitle"
      :description="meetup.description"
      :imageUrl="meetup.imageUrl"
      :email="meetup.contactEmail"
      :address="meetup.address"
      :isFav="meetup.isFavorite"
      @togglefavorite="togglefavorite"
    />
  </section>
</template>
<script>
import MeetupItem from "./MeetupItem.vue";
export default {
  components: { MeetupItem },
  props: {
    meetups: Array,
  },
  methods: {
    togglefavorite(id) {
      this.$emit("togglefavorite", id);
    },
  },
};
</script>

<style scoped>
section {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 768px) {
  section {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
